<template>
  <div class="app-wrapper">
    <headerTitle
      :titleList="titleList"
      :hideButton="false"
      btnTitle="新增"
      icon="iconfont btn_jurisdiction icon-btn_jurisdiction"
      @handelClick="() => addConfig()"
    />
    <div class="app-container">
      <div class="block containerMain" ref="block">
        <div class="searchList">
          <div class="search-item">
            <div class="item-list">
              <!-- <div class="item-con">
                <span>配置项名称</span>
                <el-input size="mini" class="item" v-model="searchform.name" placeholder="请输入配置项名称"></el-input>
              </div>
              <div class="item-con">
                <span>配置项标识</span>
                <el-input size="mini" class="item" v-model="searchform.key" placeholder="请输入配置项标识"></el-input>
              </div> -->
            </div>
            <div>
              <el-button type="primary" size="mini" @click="() => getList()">刷新</el-button>
              <!-- <el-button type="default" size="mini" @click="() => reset()">重置</el-button> -->
            </div>
          </div>
        </div>
        <div class="div-table">
          <el-table
            size="small"
            :data="list"
            :header-cell-style="headerStyle"
            :height="tableHeight"
            :cell-style="cellStyle"
            highlight-current-row
          >
            <el-table-column label="配置项名称">
              <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column label="配置项标识">
              <template slot-scope="scope">
                <span>{{ scope.row.key }}</span>
              </template>
            </el-table-column>
            <el-table-column label="配置项值">
              <template slot-scope="scope">
                <span>{{ scope.row.value }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="small" type="text"  @click="() => editconfig(scope.row)">编辑</el-button>
                <!-- <el-button size="small" type="text"  @click="() => delconfig(scope.$index,scope.row)">删除</el-button> -->
                <el-button v-show="scope.row.enable!='2'" type="text" @click="() => disBtn(scope.row, 2)">禁用</el-button>
                <el-button v-show="scope.row.enable == '2'" type="text" @click="() => disBtn(scope.row, 1)">启用</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- <pagination :pagination="pagination" /> -->
    <!-- 新增模态框 -->
    <el-dialog :title="titleName" :visible.sync="dialogFormVisible">
      <!-- <el-form :model="form" :rules="formrules" ref="form"> -->
      <el-form :model="form" >
        <el-form-item label="配置项" :label-width="formLabelWidth" disabled placeholder="请选择配置项">
          <el-select v-model="configDetail" clearable placeholder="请选择" @change="changeConfig">
            <el-option
              v-for="item in configList"
              :key="item.key"
              :label="item.name"
              :value="item.key"
              >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="配置项标识" :label-width="formLabelWidth"  prop="key" >
          <el-input v-model="form.key" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="配置项名称" :label-width="formLabelWidth"  prop="name" >
          <el-input v-model="form.name" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="配置项值" :label-width="formLabelWidth"  prop="value">
          <el-input type="textarea" v-model="form.value"></el-input>
           <!-- <el-radio v-model="form.value" label="1">启用</el-radio>
           <el-radio v-model="form.value" label="2">禁用</el-radio> -->
        </el-form-item>
        <el-form-item  :label-width="formLabelWidth"  >
          <span style="color:red">提示：</span>
          <span style="color:grey">{{configPlaceholder}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveConfig('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination/index";
import HeaderTitle from "@/components/Headertitle/index";
// import { fetchData, fetchDel } from "@/api/systemapi/auth";
import { translateDataToTree } from "@/utils";
import { pageParams } from "@/settings";
import { getInfo } from "@/api/user"
import { fetchConfigData ,fetchConfig , fetchConfigList } from "@/api/enterpriseinfo";//配置项更新

export default {
  components: {
    Pagination,
    HeaderTitle
  },
  filters: {
    typeFilter(type) {
      const typeMap = {
        1: "目录",
        2: "菜单"
      };
      return typeMap[type];
    },
    statusFilter(status) {
      const statusMap = {
        1: "启用",
        2: "禁用"
      };
      return statusMap[status];
    },
    statusTypeFilter(status) {
      const statusMap = {
        1: "success",
        2: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      id : '',
      // titleList: [{ title: "配置项管理" }],
      treeData: null,
      list: null,
      tableHeight: "300", //表格默认高度
      listLoading: true,
      showBtn:true,
      defaultProps: {
        children: "children",
        label: "name",
        id: "id"
      },
      titleName:"新增配置项",
      dialogFormVisible: false,
      formLabelWidth: "100px",
      searchform: {
        name: "",//配置项名称
        // value: "",//配置项值
        key:"",//配置项标识
        rows: "10",
        page: "1"
      },
      entNum: "",
      activeTitle: "新增角色", // 新增编辑菜单模态框标题
      
      selectedmenu: [], // 选择的菜单权限
      configList:[],//配置项列表
      form: {
        name: "",//配置项名称
        key: "",
        // status: 1,
        value: "",
      },
      configDetail:"",//配置项
      configPlaceholder:"",//配置项提示
      showMenuErr: false, // 菜单未选择提示
      formrules: {
        name: [//配置项名称规则
          { required: true, message: "请输入配置项名称", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ],
        key: [
          { required: true, message: '请输入配置项标识', trigger: 'change' }
        ],
      },
      // 分页
      pagination: pageParams
    };
  },
  watch: {
    // 分页
    "pagination.currentPage": function() {
      this.searchform.page = this.pagination.currentPage;
      this.getList();
    },
    "pagination.pageSize": function() {
      this.searchform.rows = this.pagination.pageSize;
      this.searchform.page = 1;
      this.getList();
    }
  },

  mounted: function () {
    this.titleList=[{ title: this.$route.query.entNum }]
    this.$nextTick(() => {
      let self = this;
      this.tableHeight = this.$refs.block.offsetHeight - 120;
      window.onresize = () => {
        return (() => {
          this.tableHeight = this.$refs.block.offsetHeight - 120;
        })();
      };
    });

    this.getList();
    this.getPZX();
  },
  methods: {
    //表头背景颜色修改
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#F5F6FB;color:#666;padding-left:10px";
      }
    },
    cellStyle({row, rowIndex}) {
      return "padding-left: 10px;"
    },
    //重置
    reset() {
      this.searchform = {
        name: "",//配置项名称
        key:"",//配置项标识
        rows: "10",
        page: "1"
      },
      this.getList();
    },
    // 新增配置项
    addConfig() {
      this.dialogFormVisible = true
      // this.$refs['form'].resetFields();
      this.form = {
        name: "",//配置项名称
        key: "",
        value: "",
      }
      this.configDetail=""
      this.getPZX()

    },
    // 获取企业配置项下拉列表
    getPZX(){
      fetchConfigList({}).then((response) =>{//获取配置项列表
        this.configList = response.data
      })
      this.configList.forEach((item,index) =>{
          this.configPlaceholder=item.remark
      })
    },
    changeConfig(){
      // console.log(,"itemitemitem")
      this.configList.forEach((item,index) =>{
        if(item.key==this.configDetail){
          this.form.key=item.key
          this.form.name=item.name
          this.configPlaceholder=item.remark
        }
      })
    },
    // 编辑配置项
    editconfig(row) {
      this.dialogFormVisible = true
      // this.$refs['form'].resetFields();
      this.titleName = '编辑配置项'
      this.form = {
        name: row.name,
        key: row.key,
        value: row.value,
      }
      this.configList.forEach((item,index) =>{
        if(item.key==row.key){
          this.configDetail=item.key
        }
      })
      this.configList.forEach((item,index) =>{
          this.configPlaceholder=item.remark
      })
      getPZX()
    },
    //保存配置项
    saveConfig(){
      // this.$refs['form'].validate((valid) => {
      //     if (valid) {
      //       //调接口
      //       fetchConfig({  ...this.form,entNum:this.$route.query.entNum }).then((response) => {
      //         if (response.code == 0) {
      //           this.getList();
      //         } else {
      //           this.$message({
      //             type: "error",
      //             message: response.msg,
      //           });
      //         }
      //       });
      //       this.dialogFormVisible = false
      //     } else {
      //       console.log('error submit!!');
      //       return false;
      //     }
      //   });
      //调接口
      fetchConfig({  ...this.form,entNum:this.$route.query.entNum }).then((response) => {
        if (response.code == 0) {
          this.getList();
        } else {
          this.$message({
            type: "error",
            message: response.msg,
          });
        }
      });
      this.dialogFormVisible = false
      
    },
    //配置项查询
    getList() {
      this.listLoading = true;
      fetchConfigData({ ...this.searchform,entNum:this.$route.query.entNum }).then(response => {
        this.list = response.data;
        // this.pagination.total = response.data.records;
        this.listLoading = false;
      });

    },
    // 配置项禁用
    disBtn(data, type) {
      this.$confirm(`是否确定${type==2?'禁用':'启用'}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          fetchConfig({
            ...data,
            enable: type
          }).then(response => {
            if (response.code === 0) {
              this.$message({
                message: `${type==2?'禁用':'启用'}成功`,
                type: "success"
              });
              this.getList();
            } else {
              this.$message({
                message: response.msg,
                type: "error"
              });
            }
          });
        })
    },
    fetchTreeData() {
      this.listLoading = true;
      getMenuTree().then(response => {
        this.menulist = response.data;
        this.treeData = translateDataToTree(response.data);
        this.listLoading = false;
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  .block {
    width: 100%;
    height: 100%;
    .searchList {
      padding: 20px 10px;
      .search-item {
        font-size: 14px;
        color: #333;
        display: flex;
        justify-content: space-between;
        .item-list {
          display: flex;
        }
        .item-con {
          display: flex;
          margin-right: 30px;
          span {
            display: inline-block;
            width: 80px;
            text-align: right;
            line-height: 28px;
            margin-right: 10px;
          }
        }
        .item {
          width: 180px;
        }
      }
    }
    .div-table {
      width: 100%;
    }
    .el-row {
      height: 300px;
      .el-col {
        height: 100%;
        .div-tree {
          height: 90%;
          .el-tree {
            height: 100%;
            overflow-y: auto;
          }
        }
      }
    }
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
